<template>
  <el-dialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :title="dialogTitle"
    destroy-on-close
    @closed="handleClose"
    class="gif-icon-modal"
  >
    <div class="gif-editor-container">
      <AVCanvasEditor
        v-if="modelValue" 
        :icon-data="iconData"
        :icon-type="iconType"
        ref="avCanvasRef"
      />
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="getTransformDataClick" :loading="saving">
          生成
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import AVCanvasEditor from './components/AVCanvasEditor.vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  iconData: {
    type: Object,
    default: () => ({})
  },
  iconType: {
    type: String,
    default: 'team'
  }
});

const emit = defineEmits(['update:modelValue', 'get-transform']);

// 内部状态
const saving = ref(false);
const avCanvasRef = ref(null);

// 计算属性
const dialogTitle = computed(() => {
  return `编辑${props.iconType === 'team' ? '队伍' : '比赛'}图标: ${props.iconData?.filename || ''}`;
});

// 方法
const handleClose = () => {
  console.log('Dialog closed');
};

const getTransformDataClick = async () => {
  if (!avCanvasRef.value) {
    ElMessage.error('编辑器未初始化');
    return;
  }
  
  saving.value = true;
  try {
    const transform = await avCanvasRef.value.getTransformData();
    console.log('获取到的变换数据:', transform);
    emit('get-transform', transform);
    emit('update:modelValue', false);
  } catch (error) {
    console.error('获取失败:', error);
    ElMessage.error(`获取失败: ${error.message || '未知错误'}`);
  } finally {
    saving.value = false;
  }
};

</script>

<style scoped>
.gif-editor-container {
  overflow: hidden;
  min-width: none;
}

</style>